<template>
  <transition name='showHeader'>
    <div>
      <lock-screen v-if='showLock'></lock-screen>
      <div v-if='visible' class='header-animat'>
        <a-layout-header
          v-if='visible'
          :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
          :style="{ padding: '0' }">
          <div v-if="mode === 'sidemenu'" class='header'>
            <a-icon v-if="device==='mobile'" class='trigger' :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click='toggle' />
            <a-icon v-else class='trigger' :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click='toggle' />
            <span style='font-weight: bold'>当前账套:</span>
            <a-select @change='changeCompany' style='width:230px;margin-left: 5px' v-model='companyId'>
              <a-select-option :key='company.companyId' v-for='(company ,index) in companyList'>
                {{ company.companyName }}
              </a-select-option>
            </a-select>
            <user-menu></user-menu>
          </div>
          <div v-else :class="['top-nav-header-index', theme]">
            <div class='header-index-wide'>
              <div class='header-index-left'>
                <logo class='top-nav-header' :show-title="device !== 'mobile'" />
                <s-menu v-if="device !== 'mobile'" mode='horizontal' :menu='menus' :theme='theme' />
                <a-icon v-else class='trigger' :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click='toggle' />
              </div>
              <user-menu class='header-index-right'></user-menu>
            </div>
          </div>
        </a-layout-header>
      </div>
    </div>
  </transition>
</template>

<script>
import UserMenu from "../tools/UserMenu"
import SMenu from "../Menu/"
import Logo from "../tools/Logo"
import { mixin } from "@/utils/mixin"
import Vue from "vue"
import LockScreen from "@/components/LockScreen"
import { webSocketMixins } from "@/core/mixins/webSocket"

export default {
  name: "GlobalHeader",
  components: {
    LockScreen,
    UserMenu,
    SMenu,
    Logo
  },
  mixins: [mixin, webSocketMixins],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: "sidemenu"
    },
    menus: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: "dark"
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    device: {
      type: String,
      required: false,
      default: "desktop"
    }
  },
  data() {
    return {
      showLock: false,
      visible: true,
      companyList: [],
      companyName: this.$store.state.user.companyName,
      userName: this.$store.state.user.userName,
      companyId: this.$store.state.user.companyId,
      oldScrollTop: 0
    }
  },
  mounted() {
    document.addEventListener("scroll", this.handleScroll, { passive: true })
  },
  methods: {
    handleScroll() {
      if (!this.autoHideHeader) {
        return
      }

      const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
      if (!this.ticking) {
        this.ticking = true
        requestAnimationFrame(() => {
          if (this.oldScrollTop > scrollTop) {
            this.visible = true
          } else if (scrollTop > 300 && this.visible) {
            this.visible = false
          } else if (scrollTop < 300 && !this.visible) {
            this.visible = true
          }
          this.oldScrollTop = scrollTop
          this.ticking = false
        })
      }
    },
    getCompany() {
      this.http.get(this, {
        url: this.api.company.getAccount,
        params: { accountName: this.$store.state.user.userName },
        success: function(me, data) {
          me.companyList = data
          let list = data.filter(item => item.companyId != 1).map((item) => {
            return {
              text: item.companyName,
              value: item.companyId
            }
          })
          Vue.ls.set("companyList", JSON.stringify(list))
          if (me.companyList.length >= 1) {
            //me.form.setFieldsValue({ "companyId": me.companyList[0].companyId })
          }
        }
      })
    },
    changeCompany(companyId) {
      this.http.post(this, {
        url: this.api.managerUser.changeCompany,
        data: {
          companyId: companyId
        },
        success(me, data) {
          window.location.reload()
        }
      })
    },
    /**
     * 获取维护状态
     */
    getMteState() {
      this.http.get(this, {
        url: this.api.config.getByKey,
        params: {
          configKey: "mteState"
        },
        success: (me, data) => {
          let configVal = data.configVal
          if (configVal == "true" && !this.superAdmin) {
            this.showLock = true
          }
          if (configVal == "false") {
            this.showLock = false
          }
        }
      })
    },
    toggle() {
      this.$emit("toggle")
    },
    onMteMessage(messageInfo) {
      console.info("onMteMessage", messageInfo)
      if (messageInfo) {
        let msgType = messageInfo.msgTypeId
        this.getMteState()
      }
      console.log("维护通知", messageInfo)
    }
  },
  created() {
    this.getMteState()
    this.getCompany()
    this.initWebSocket(this.onMteMessage, 3)
  },
  beforeDestroy() {
    document.body.removeEventListener("scroll", this.handleScroll, true)
  }
}
</script>

<style lang='less'>
@import '../index.less';

.header-animat {
  position: relative;
  z-index: @ant-global-header-zindex;
}

.showHeader-enter-active {
  transition: all 0.25s ease;
}

.showHeader-leave-active {
  transition: all 0.5s ease;
}

.showHeader-enter, .showHeader-leave-to {
  opacity: 0;
}
</style>
